<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js" ></script>
    <script type="text/javascript" src="/js/vue.js" ></script>
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <style>
        #fenye{
            float: left;
            width:850px;
            text-align: center;
            margin-top: 30px;
            margin-left: 270px;
        }
        .proImg{
            width:200px;
            height:200px;
            border: 1px solid black;
            margin-left: 10px;
        }
        .addProduct{
            margin-top: 20px;
            margin-left: 40px;
        }
        #yiyoutupian{
            font-size: 18px;
            color: #13ce66;
            font-weight: bold;
        }

    </style>

</head>
<body>
    <div id="app">
        <template>
            <el-table
                    :highlight-current-row="highlight"
                    :data="tableData"
                    style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="商品描述">
                                <span>{{ props.row.describe }}</span>
                            </el-form-item>
                            <br/>
                            <el-form-item label="商品图片">
                               <img class="proImg" v-for="item in props.row.img" :src="item.url" />
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品id"
                        prop="proId">
                </el-table-column>
                <el-table-column
                        label="商品名称"
                        prop="proName">
                </el-table-column>
                <el-table-column
                        label="类别"
                        prop="categoryName">
                </el-table-column>
                <el-table-column
                        sortable
                        label="单价"
                        prop="price">
                </el-table-column>
                <el-table-column
                        sortable
                        label="库存"
                        prop="stock">
                </el-table-column>
                <el-table-column
                        label="上下架"
                        prop="statusName"
                >
                </el-table-column>
                <el-table-column
                        align="right">
                    <template slot="header" slot-scope="scope">
                        <el-select v-model="status" >
                            <el-option
                                    v-for="item in options1"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-select v-model="category" >
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        align="right">
                    <template slot="header" slot-scope="scope">
                        <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"/>
                    </template>
                    <template slot-scope="scope">
                        <el-button
                                v-if="scope.row.status==0"
                                size="mini"
                                type="success"
                                @click="handleDelete(scope.$index, scope.row)">
                            <span >上架</span>
                        </el-button>
                        <el-button
                                v-if="scope.row.status==1"
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">
                            <span >下架</span>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--分页-->
        <div id="fenye">
            <el-pagination
                    :background="background"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageIndex"
                    :page-sizes="[3,5,8,10]"
                    :page-size="number"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="count">
            </el-pagination>
        </div>
        <el-button type="warning" @click="dialogVisible = true" class="addProduct">添加商品</el-button>

        <!--新增模态框-->
        <el-dialog
                title="添加商品"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose">
            <span>名称</span>&nbsp;&nbsp;<el-input style="width: 250px" v-model="product.proName" placeholder="请输入名称"></el-input>
             <br><br>
            <span>单价</span>&nbsp;&nbsp;<el-input placeholder="请输入价格" style="width: 250px"  v-model="product.price"></el-input>&nbsp;&nbsp;<span>元</span>
            <br><br>
            <span>类别</span>&nbsp;&nbsp;
            <el-select  v-model="product.categoryId" placeholder="选择类别">
                <el-option
                    v-for="item in option2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                 </el-option>
            </el-select>
            <br><br>
            <span>状态</span>&nbsp;&nbsp;
            <el-select   v-model="product.status" placeholder="是否上架">
                <el-option
                        v-for="item in option3"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <br><br>
            <span>库存</span>&nbsp;&nbsp;<el-input placeholder="请输入库存" style="width: 250px"  v-model="product.stock"></el-input>
           <br><br>
            <span>描述</span>&nbsp;&nbsp;<el-input style="width: 550px" type="textarea" autosize placeholder="请输入内容" v-model="product.describe"></el-input>
            <br><br>
            <!--上传图片-->
            <el-upload
                    class="upload-demo"
                    action="/uploadImgs"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    :on-success="successUpload"
                    list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3M</div>
            </el-upload>

            <span slot="footer" class="dialog-footer">
                <el-button @click="addProductQuxiao">取 消</el-button>
                <el-button type="primary" @click="tijiaoAdd">提 交</el-button>
            </span>
        </el-dialog>

        <!--更改模态框-->
        <el-dialog
                title="更改商品信息"
                :visible.sync="dialogVisible1"
                width="50%"
                :before-close="handleClose">
            <span>名称</span>&nbsp;&nbsp;<el-input style="width: 250px" v-model="product1.proName" placeholder="请输入名称"></el-input>
            <br><br>
            <span>单价</span>&nbsp;&nbsp;<el-input placeholder="请输入价格" style="width: 250px"  v-model="product1.price"></el-input>&nbsp;&nbsp;<span>元</span>
            <br><br>
            <span>类别</span>&nbsp;&nbsp;
            <el-select  v-model="product1.categoryId" placeholder="选择类别">
                <el-option
                        v-for="item in option2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <br><br>
            <span>库存</span>&nbsp;&nbsp;<el-input placeholder="请输入库存" style="width: 250px"  v-model="product1.stock"></el-input>
            <br><br>
            <span>描述</span>&nbsp;&nbsp;<el-input style="width: 550px" type="textarea" autosize placeholder="请输入内容" v-model="product1.describe"></el-input>
            <br><br><br>
            <span id="yiyoutupian">已有图片,谨慎删除 </span>
            <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-remove="deleteImgs"
                    :file-list="imgsList"
                    list-type="picture">
            </el-upload>
            <br><br>
            <!--上传图片-->
            <el-upload
                    class="upload-demo"
                    action="/uploadImgs"
                    :on-remove="handleRemove1"
                    :file-list="fileList1"
                    :on-success="successUpload1"
                    list-type="picture">
                <el-button size="small" type="primary">增加图片</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3M</div>
            </el-upload>

            <span slot="footer" class="dialog-footer">
                <el-button @click="updateProductQuXiao">取 消</el-button>
                <el-button type="primary" @click="updateProductTiJiao">提 交</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            tableData: [],
            search:'',
            pageIndex:1,
            number:5,
            count:0,
            //分页数字背景
            background:true,
            //高亮
            highlight:true,
            //选择器,分类
            options: [{
                value: 1,
                label: '房车模型'
            }, {
                value: 2,
                label: '旅游装备'
            }, {
                value: 3,
                label: '土特产'
            },{
                value:0,
                label: '全部类别'
            }],
            category:0,
            //选择器,分状态
            options1: [{
                value: 0,
                label: '下架商品'
            }, {
                value: 1,
                label: '上架商品'
            }, {
                value: 2,
                label: '全部状态'
            }],
            status:2,
            //模态框
            //状态
            dialogVisible: false,
            //选择器
            option2:[{
                value:1,
                label:'房车模型'
            },{
                value:2,
                label:'旅游装备'
            },{
                value:3,
                label:'土特产'
            }],
            option3:[{
                value:0,
                label:'下架'
            },{
                value:1,
                label:'上架'
            }],
            //新增商品
           product:{
               proName:'',
               categoryId:null,
               price:null,
               stock:null,
               describe:'',
               status:null
           },
            //图片集合
            fileList:[],

            //更新商品模态框信息
            dialogVisible1: false,
            product1:{
                proId:'',
                proName:'',
                categoryId:null,
                price:null,
                stock:null,
                describe:''
            },
            fileList1:[],
            imgsList:[],
            //要删除的图片数组
            deleteImgsList:[],
            //当前当前更新在当前的下标
            updateIndex:0
        },
        created(){
            this.selectProductList(1,5,this.category,this.status,this.search);
        },
        watch:{
            'category':function(){
                this.pageIndex=1;
                this.number=5;
                this.selectProductList(this.pageIndex,this.number,this.category,this.status,this.search);
            },
            'status':function(){
                this.pageIndex=1;
                this.number=5;
                this.selectProductList(this.pageIndex,this.number,this.category,this.status,this.search);
            },
            'search':function(){
                this.pageIndex=1;
                this.number=5;
                this.selectProductList(this.pageIndex,this.number,this.category,this.status,this.search);
            }
        },
        methods:{
            //查询商品集合
            selectProductList(pageIndex,number,category,status,condition){
                console.log("condition:"+condition);
                var _this=this;
                $.ajax({
                    url:"/selectAllProductFenYe",
                    type:"post",
                    data:{
                        'pageIndex':pageIndex,
                        'number':number,
                        'categoryId':category,
                        'status':status,
                        'condition':condition
                    },
                    dataType:"json",
                    success:function(data){
                        _this.tableData=data.list;
                        _this.count=data.obj.count;
                        //给对象添加类别和上下架字段
                        for(var i=0;i<_this.tableData.length;i++){
                            if(_this.tableData[i].categoryId==1){
                                _this.tableData[i]['categoryName']="房车模型";
                            }else if(_this.tableData[i].categoryId==2){
                                _this.tableData[i]['categoryName']="旅游装备";
                            }else{
                                _this.tableData[i]['categoryName']="土特产";
                            }
                            if(_this.tableData[i].status==0){
                                _this.tableData[i]['statusName']="已下架";
                            }else{
                                _this.tableData[i]['statusName']="上架中";
                            }
                        }
                        //给商品中最追加图片
                        for(var i=0;i<_this.tableData.length;i++){
                            $.ajax({
                                url:"/selectProductAllImgs",
                                type:"post",
                                data:{
                                    'proId':_this.tableData[i].proId
                                },
                                async:false,
                                dataType:'json',
                                success:function(data1){
                                    _this.tableData[i].img=data1.list;
                                }
                            })
                        }
                    }
                })
            },
            handleEdit(index, row) {
                this.dialogVisible1=true;
                this.product1.proId=row.proId;
                this.product1.proName=row.proName;
                this.product1.categoryId=row.categoryId;
                this.product1.stock=row.stock;
                this.product1.price=row.price;
                this.product1.status=row.status;
                this.product1.describe=row.describe;
                this.imgsList=[];
                for(var i=0;i<row.img.length;i++){
                    this.imgsList.push(row.img[i]);
                }
                this.updateIndex=index;
            },
            //上下架商品
            handleDelete(index, row) {
                var _this=this;
                if(row.status==0){
                    this.$confirm('确认上架该商品, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //调用上下架方法并从tableData改变
                        _this.changeStatus(row.proId,1);
                        _this.tableData[index].status=1;
                        _this.tableData[index].statusName="上架中";
                        this.$message({
                            type: 'success',
                            message: '上架成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消上架'
                        });
                    });
                }else{
                    this.$confirm('确认下架该商品, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //调用上下架方法并从tableData改变
                        _this.changeStatus(row.proId,0);
                        _this.tableData[index].status=0;
                        _this.tableData[index].statusName="已下架";
                        this.$message({
                            type: 'success',
                            message: '下架成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消下架'
                        });
                    });
                }
            },
            //上下架
            changeStatus(proId,status){
                $.ajax({
                    url:'/updateProductStatus',
                    type:"post",
                    data:{
                        proId:proId,
                        status:status
                    },
                    dataType:'json',
                    success:function(data){
                        if(data.code=="200"){
                            return '200';
                        }else{
                            return '400';
                        }
                    }
                })
            },
            //number变化触发
            handleSizeChange(val) {
                this.number=val;
                this.selectProductList(this.pageIndex,this.number,this.category,this.status,this.search);
            },
            //当前页改变触发
            handleCurrentChange(val) {
                this.pageIndex=val;
                this.selectProductList(this.pageIndex,this.number,this.category,this.status,this.search);
            },
            //模态框确定触发
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            //上传图片
            //添加商品时删除图片
            handleRemove(file, fileList) {
                this.fileList=fileList;
            },
            //设置图片上传大小
            setUploadBytes(file){
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isLt2M = file.size / 1024/1024  < 3;

                if (!isJPG &&  !isPNG) {
                    this.$message.error('上传图片必须是JPG/PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过3M!');
                }
                return (isJPG || isPNG) && isLt2M;
            },
            //添加商品时添加图片成功后的
            successUpload(response,file,fileList){
                //参数fileList为当前已将上传的图片的参数集合
                this.fileList=fileList;
            },
            //判断是否是数字
            isNumber(value) {         //验证是否为数字
              var patrn = /^(-)?\d+(\.\d+)?$/;
                if (patrn.exec(value) == null || value == "") {
                       return false
                   } else {
                        return true
                }
            },
            //添加商品提交
            tijiaoAdd(){
                //判断数据
                if(this.product.proName.length<1){
                    this.$message({
                        type: 'info',
                        message: '请填写名称'
                    });
                    return;
                }
                if(this.isNumber(this.product.price)==false || this.product.price==null ){
                    this.$message({
                        type: 'info',
                        message: '请填写有效价格'
                    });
                    return;
                }
                if(this.product.categoryId==null){
                    this.$message({
                        type: 'info',
                        message: '请选择类别'
                    });
                    return;
                }
                if(this.product.status==null){
                    this.$message({
                        type: 'info',
                        message: '请选择是否状态'
                    });
                    return;
                }
                if(this.isNumber(this.product.stock)==false || this.product.stock==null ){
                    this.$message({
                        type: 'info',
                        message: '请填写有效库存'
                    });
                    return;
                }
                if(this.product.describe.length<1){
                    this.$message({
                        type: 'info',
                        message: '请填写描述'
                    });
                    return;
                }
                //添加product数据库
                var _this=this;
                var imgs=[];
                for(var i=0;i<this.fileList.length;i++){
                    imgs.push(this.fileList[i].response);
                }
                if(imgs.length==0){
                    this.$message({
                        type: 'info',
                        message: '请上传图片'
                    });
                    return;
                }
                //定义主键
                var proId=0;
                $.ajax({
                    url:'/addProductLiu',
                    type:'post',
                    data:{
                        proName:_this.product.proName,
                        price:_this.product.price,
                        stock:_this.product.stock,
                        categoryId:_this.product.categoryId,
                        status:_this.product.status,
                        describe:_this.product.describe,
                        url:imgs[0]
                    },
                    async:false,
                    dataType:'json',
                    success:function(data){
                        proId=data.obj;
                    }
                })
                //添加图片到数据库
                if(imgs.length>0){
                    for(var i=0;i<imgs.length;i++){
                        $.ajax({
                            url:'/addProductImg',
                            type:'post',
                            data:{
                                proId:proId,
                                url:imgs[i]
                            },
                            async:false,
                            dataType:'json'
                        })
                    }
                }
                //清空添加商品的绑定,以下次添加商品页面上为空
                this.product.proName='';
                this.product.categoryId=null;
                this.product.price=null;
                this.product.stock=null;
                this.product.describe=null;
                this.fileList=[];
                this.product.status=null;
                this.$message({
                    type: 'info',
                    message: '添加成功'
                });
                //关闭窗口
                this.dialogVisible=false;
            },
            //添加商品取消
            addProductQuxiao(){
                this.product.proName='';
                this.product.categoryId=null;
                this.product.price=null;
                this.product.stock=null;
                this.product.describe=null;
                this.fileList=[];
                this.product.status=null;
                this.dialogVisible=false;
            },
            //更改图片时,删除之前的图片
            deleteImgs(file,fileList){
                //将要删除的存入数组deleteImgsList
                this.deleteImgsList.push(file.imgId);
            },
            //更新取消
            updateProductQuXiao(){
                this.deleteImgsList=[];
                this.fileList1=[];
                this.imgsList=[];
                this.dialogVisible1 = false;
            },
            //更改商品添加成功后执行
            successUpload1(response,file,fileList){
                //参数fileList为当前已将上传的图片的参数集合
                this.fileList1=fileList;
            },
            //更改商品删除
            handleRemove1(file, fileList) {
                this.fileList1=fileList;
            },
            //更改商品提交
            updateProductTiJiao(){
                //判断数据
                if(this.product1.proName.length<1){
                    this.$message({
                        type: 'info',
                        message: '请填写名称'
                    });
                    return;
                }
                if(this.isNumber(this.product1.price)==false || this.product1.price==null ){
                    this.$message({
                        type: 'info',
                        message: '请填写有效价格'
                    });
                    return;
                }
                if(this.product1.categoryId==null){
                    this.$message({
                        type: 'info',
                        message: '请选择类别'
                    });
                    return;
                }
                if(this.product1.status==null){
                    this.$message({
                        type: 'info',
                        message: '请选择是否状态'
                    });
                    return;
                }
                if(this.isNumber(this.product1.stock)==false || this.product1.stock==null ){
                    this.$message({
                        type: 'info',
                        message: '请填写有效库存'
                    });
                    return;
                }
                if(this.product1.describe.length<1){
                    this.$message({
                        type: 'info',
                        message: '请填写描述'
                    });
                    return;
                }

                var _this=this;
                var imgs=[];
                for(var i=0;i<this.fileList1.length;i++){
                    imgs.push(this.fileList1[i].response);
                }
                //更新product内容
                $.ajax({
                    url:'/updateProductLiu',
                    type:'post',
                    data:this.product1,
                    async:false,
                    dataType:'json',
                })
                //添加图片到数据库
                if(imgs.length>0){
                    for(var i=0;i<imgs.length;i++){
                        $.ajax({
                            url:'/addProductImg',
                            type:'post',
                            data:{
                                proId:this.product1.proId,
                                url:imgs[i]
                            },
                            async:false,
                            dataType:'json'
                        })
                    }
                }
                //从数据库中删除图片
                if(this.deleteImgsList.length>0){
                    for(var i=0;i<this.deleteImgsList.length;i++){
                        $.ajax({
                            url:'/deleteProductImg',
                            type:'post',
                            data:{
                                imgId:_this.deleteImgsList[i]
                            },
                            async:false,
                            dataType:'json'
                        })
                    }
                }
                //改变当前tablData的数据,立即在页面上显示
                var m=this.updateIndex;
                this.tableData[m].proName=this.product1.proName;
                this.tableData[m].price=this.product1.price;
                this.tableData[m].stock=this.product1.stock;
                this.tableData[m].describe=this.product1.describe;
                this.tableData[m].categoryId=this.product1.categoryId;
                if(this.tableData[m].categoryId==1){
                    this.tableData[m].categoryName="房车模型"
                }else if(this.tableData[m].categoryId==2){
                    this.tableData[m].categoryName="旅游装备"
                }else{
                    this.tableData[m].categoryName="土特产"
                }
                //查询当前imgs
                $.ajax({
                    url:"/selectProductAllImgs",
                    type:"post",
                    data:{
                        'proId':this.product1.proId
                    },
                    async:false,
                    dataType:'json',
                    success:function(data1){
                        _this.tableData[m].img=data1.list;
                    }
                })
                //清空绑定,以下次添加商品页面上为空
                this.deleteImgsList=[];
                this.fileList1=[];
                this.imgsList=[];
                this.$message({
                    type: 'info',
                    message: '更新成功'
                });
                //关闭窗口
                this.dialogVisible1=false;
            }
        }
    })
</script>
</html>